<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq</title>
    <style>
        .app {
            width: 300px;
            /* height: 300px; */
            background: aqua;
            position: relative;
            /* transform:scale(1); */
        }
    </style>
</head>
<body>
    <button id="btn">按钮</button>

    <div class="app" id="app">
        <div>1-1</div>
        <div>2-2</div>
        <div>3-3</div>
        <div>4-4</div>
        <div>5-5</div>
        <div>6-6</div>
        <div>7-7</div>
        <div>
            123
            <h1>234</h1>
        </div>
        <div>8-8</div>
    </div>
    <script src="./public/video/jquery.js"></script>
    <script>
       $('#btn').click(() => {
            // $('.app').hide();
            // $('.app').show();
            // $('.app').toggle();
            // $('.app').fadeIn();
            // $('.app').fadeOut();
            // $('.app').fadeToggle(2000,() => {
            //     // 动画完成事件
            //     alert('完成')
            // });
            // $('.app').fadeTo(2000,0.1,() => {
            //     // 动画完成事件
            //     $('.app').fadeTo(1000,1,() => {
            //         alert("恢复完成")
            //     })
            // });

            // 滑动
            // $('.app').slideToggle();

            // 动画
            // $(".app").animate({
            //     left:'250px',
            // },2000,() => {
                
            // }).css({
            //     top:"200px"
            // });

            // 获取DOM内容 text
            console.log($('.app').html())
            console.log($('.app').text())
            console.log($('.app').val())
            // 获取属性值
            console.log($('.app').attr('id'))
            console.log($('.app').children())
            console.log($('.app').eq(0))
       })
    </script>
</body>

</html>